<template>
	<div class="self">
		<div class="grzxbj">
			<div class="selfinfo center">
			<div class="lfnav fl">
				<div class="ddzx">订单中心</div>
				<div class="subddzx">
					<ul>
						<li><router-link tag='a' :to="'/dingdan'" >我的订单</router-link></li>
					</ul>
				</div>
				<div class="ddzx">个人中心</div>
				<div class="subddzx">
					<ul>
						<li><router-link tag='a' :to="'/self'" style="color:#ff6700;font-weight:bold;" >我的个人中心</router-link></li>
						<li><a href="">我的积分</a></li>
						<li><a href="">收货地址</a></li>
					</ul>
				</div>
			</div>
			<div class="rtcont fr">
				<div class="grzlbt ml40">我的资料</div>
				<button class="grzlbt1 ml40">编辑</button>
				<!--<button class="grzlbt2 ml40" @click="grzlbt2" >完成</button>-->
				<el-button :plain="true" @click="grzlbt2" class="grzlbt2 ml40">修改</el-button>
				<div class="subgrzl ml40"><span>昵称</span><input type="text" :value="userinfoSelf[0].Nickname" disabled="disabled" class="Nickname1" ></input></div>
				<div class="subgrzl ml40"><span>头像</span><input type="text" :value="userinfoSelf[0].userImg" disabled="disabled" class="userImg1"></input></div>
				<div class="subgrzl ml40"><span>登录密码</span><input type="text" :value="userinfoSelf[0].userPwd" disabled="disabled" class="userPwd1"></input></div>
				<div class="subgrzl ml40"><span>支付密码</span><input type="text" :value="userinfoSelf[0].PayPwd" disabled="disabled" class="PayPwd1"></input></div>
				<div class="subgrzl ml40"><span>收货地址</span><input type="text" :value="userinfoSelf[0].userAddr" disabled="disabled" class="userAddr1"></input></div>
				<div class="subgrzl ml40"><span>邮箱</span><input type="text" :value="userinfoSelf[0].userEmail" disabled="disabled" class="userEmail1"></input></div>
				
				
			</div>
			<div class="clear"></div>
			</div>
		</div>
	</div>
		
</template>
<script>
	export default {
		name: 'self',
		data() {
			return {
				userinfoSelf:[
					{Nickname:"",PayPwd:"",balance:0,integral:0,userAddr:"",userEmail:"",userId:0,userImg:"",userName:"",userPwd:"",usertime:""}
				],
				userinfoUpdate:[]
			}
		},
    	mounted() {
    		$(".grzlbt1").click(function(){
    			$(".subgrzl input").removeAttr("disabled");
    			$(".subgrzl input").addClass("active");
    			$(".grzlbt1").hide();
    			$(".grzlbt2").show();
    		});		
    		//查询用户
    		var userId=window.sessionStorage.getItem("userId"); 
    		
		      this.axios.post('/api/HomePageInterface/userinfoSelf', this.qs.stringify({
		      	userId:userId
		      }), {
		        headers: {
		          'Content-Type': 'application/x-www-form-urlencoded'
		        }
		      })
		        .then(function(res) {
		          if (res.data.status=="200"){
		            this.userinfoSelf = res.data.msg;
		          }
		          //控制台打印请求成功时返回的数据
		          //bind(this)可以不用
		        }.bind(this))
		        .catch(function(err) {
		          if (err.response) {
		            console.log(err.response)
		            //控制台打印错误返回的内容
		          }
		        }.bind(this));
    	},
    	methods:{
    		grzlbt2(){
    		   var userId=window.sessionStorage.getItem("userId"); 
    		   var Nickname=$(".Nickname1").val();
		       var userImg=$(".userImg1").val();
		       var userPwd=$(".userPwd1").val();
		       var PayPwd=$(".PayPwd1").val();
		       var userAddr=$(".userAddr1").val();
		       var userEmail=$(".userEmail1").val();
      		 this.axios.post('/api/HomePageInterface/userinfoUpdate', this.qs.stringify({
		      	userId:userId,
		      	Nickname:Nickname,
		      	userImg:userImg,
		      	userPwd:userPwd,
		      	PayPwd:PayPwd,
		      	userAddr:userAddr,
		      	userEmail:userEmail
		      }), {
		        headers: {
		          'Content-Type': 'application/x-www-form-urlencoded'
		        }
		      })
		        .then(function(res) {
		          if (res.data.status=="200"){
		            this.userinfoUpdate = res.data.msg;
		             this.$message({
          				message: '恭喜你，这是一条成功消息',
          				type: 'success'
        			});
        			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						window.location.reload();//页面刷新
					},1000);
		          }
		          //控制台打印请求成功时返回的数据
		          //bind(this)可以不用
		        }.bind(this))
		        .catch(function(err) {
		          if (err.response) {
		            console.log(err.response)
		            //控制台打印错误返回的内容
		          }
		        }.bind(this));
    		}
    	}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.self {
		background: white;
		width: 100%;
		margin: 0px auto;
		text-align: left;
	}
	.subgrzl input.active{
		text-align: left;
		color:rgb(117,117,117);
		font-weight:normal;
	}
	input{
		text-align: center;
		color: cornflowerblue;
		font-weight: bold;
	}
	.grzlbt2{
		margin-left: 800px;
		position: absolute;
		top: 180px;
		display: none;
	}
	
</style>